<template>
  <div>
    <a-card>
      已退回订单
      <div style="text-align: right;">
        <a-input v-model="searchData.orderNumber" placeholder="请输入想要查询的订单编号" style="width: 280px;margin-right: 20px;"></a-input>
        <a-range-picker v-model="searchData.date"  style="margin-right: 20px;" :allow-clear="false" />
        <a-button type="primary" @click="getOrderListRollback">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card>
      <span slot="title">详细数据</span>
      <a-table
        bordered
        row-key="id"
        :pagination="pagination"
        :loading="rollbackLoading"
        :columns="columns"
        :data-source="dataSource"
      >
        <span slot="createTime" slot-scope="createTime">
          {{ transformFormatDate(createTime) }}
        </span>
        <span slot="status" slot-scope="status">
          {{ status === -1 ? '已退回' : '数据错误' }}
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getOrderList } from '@/api/api';
import { formatDate } from '@/lib/common';
import moment from 'moment';

export default {
  name: 'Rollback',
  data() {
    return {
      searchData: {
        orderNumber: '',
        date: [
          moment(moment(new Date(new Date().toLocaleDateString()).getTime())),
          moment(moment(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)),
        ]
      },
      rollbackLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        { title: '订单编号', dataIndex: 'orderNumber', key: 'orderNumber' },
        { title: '描述信息', dataIndex: 'desc', key: 'desc' },
        { title: '订单创建时间', dataIndex: 'createTime', key: 'createtTime', scopedSlots: { customRender: 'createTime' } },
        { title: '订单状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
        { title: '用户姓名', dataIndex: 'userInfo.name', key: 'userInfo.name' },
        { title: '用户地址', dataIndex: 'userInfo.userAddress', key: 'userInfo.userAddress' },
      ],
      dataSource: [],
    }
  },
  methods: {
    /**
     * 时间戳转换为日期
     * @param data 时间戳
     */
    transformFormatDate(data) {
      return formatDate(parseInt(data));
    },
    /**
     * 获取数据
     */
    getOrderListRollback() {
      this.rollbackLoading = true;
      let options = {
        page: this.pagination.current,
        size: this.pagination.pageSize,
        orderNumber: this.searchData.orderNumber,
        startTime: moment(this.searchData.date[0]).unix() * 1000,
        endTime: moment(this.searchData.date[1]).unix() * 1000,
        evaluation: '',
        status: -1
      }
      getOrderList(options)
        .then(res => {
          let data = res.data;
          this.dataSource = data.list;
          this.pagination.total = data.total;
        })
        .catch(err => {
          this.$message.error(`获取退回订单失败，${err.data}`);
        })
        .finally(() => {
          this.rollbackLoading = false;
        });
    }
  },
  mounted() {
    this.getOrderListRollback();
  }
}
</script>

<style>

</style>